/*
   Image Resize Handle JS
   
   require jQuery.Interface (jquery.interface.js)
   by Aiden Kim 2013
*/

(function() {
	if (!jQuery().Resizable) {
		var sajs = document.createElement('script'); sajs.type = 'text/javascript'; sajs.async = true;
		sajs.src = '/js/jquery.interface.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(sajs, s);}
	if (!jQuery().toJSON) {
		var sajs = document.createElement('script'); sajs.type = 'text/javascript'; sajs.async = true;
		sajs.src = '/js/jquery.json-2.4.min.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(sajs, s);}
})();


var ImageResizeHandle = function (id, targetWidth, targetHeight) {

	this.STATUS_NOT_INIT = 1;
	this.STATUS_INIT_COMPLETE = 2;	// Elements are created
	this.STATUS_LOADING = 3;		// Image is loading
	this.STATUS_ORIGINAL = 4;		// Image is loading & showed
	this.STATUS_RESIZABLE = 5;		// Image is loading & resizable

	this.imageInfoUrl = '/@manage/files/imageinfo.do';	// URL of get image infomation
	this.imageInfoCallbackFunc = null;

	this.id = id;
	this.resizableOption = {};
	this.targetWidth = targetWidth;
	this.targetHeight = targetHeight;
	this.zoomRatio = 1;
	this.status = this.STATUS_NOT_INIT;
	this.useEffect = true;
	this.visible = false;
	
	if ($("#"+this.id).length > 0) {
		this.init();
	}else{
		$(document).ready(this.init.bind(this));	
	}
};

ImageResizer.prototype.init = function() {
	$("#"+this.id).addClass("imgResizePanel").css('display', 'none')
		.append($("<img>",{id:this.id+"Background", class:"imgResizeBackground"}))
		.append($("<div>",{id:this.id+"Box", class:"imgResizeBox"}))
		.append($("<img>",{id:this.id+"Original", class:"imgResizeForeground"}))
		.after($("<div>", {id:this.id+"Size"}).css("width","100%").css("height","1px"));
	$("#"+this.id+"Box").append($("<div>",{id:this.id+"ForegroundContainer", class:"imgResizeForegroundContainer"}))
		.append($("<div>",{id:this.id+"HandleSE", class:"imgResizeHandleSE"}))
		.append($("<div>",{id:this.id+"HandleE", class:"imgResizeHandleE"}))
		.append($("<div>",{id:this.id+"HandleNE", class:"imgResizeHandleNE"}))
		.append($("<div>",{id:this.id+"HandleN", class:"imgResizeHandleN"}))
		.append($("<div>",{id:this.id+"HandleNW", class:"imgResizeHandleNW"}))
		.append($("<div>",{id:this.id+"HandleW", class:"imgResizeHandleW"}))
		.append($("<div>",{id:this.id+"HandleSW", class:"imgResizeHandleSW"}))
		.append($("<div>",{id:this.id+"HandleS", class:"imgResizeHandleS"}));
	$("#"+this.id+"ForegroundContainer").append($("<img>",{id:this.id+"Foreground", class:"imgResizeForeground"}));
	
	this.status = this.STATUS_INIT_COMPLETE;
};

ImageResizer.prototype.load = function(url, orgWidth, orgHeight) {

	if (!url) return false;
	if ((!orgWidth) || (!orgHeight)) {
		$.getJSON(this.imageInfoUrl+'?url='+encodeURIComponent(url), this.imageInfoCallback.bind(this));
		return true;	
	}
	if (this.status <= this.STATUS_LOADING) {
		this.reset();
	}
	
	var maxCanvasWidth = $("#"+this.id+"Size").width();
	var canvasWidth = 0, canvasHeight = 0;
	var canvasRatio = orgWidth / orgHeight;
	
	if (orgWidth > maxCanvasWidth) {
		canvasWidth = maxCanvasWidth;
		canvasHeight = Math.round(maxCanvasWidth / canvasRatio);
		this.zoomRatio = canvasWidth / orgWidth;
	}else{
		canvasWidth = orgWidth;
		canvasHeight = orgHeight;
		this.zoomRatio = 1;
	}

	var initialWidth = Math.round(canvasWidth/3);
	if (initialWidth < this.targetWidth) initialWidth = this.targetWidth;
	var initialHeight = initialWidth * this.targetHeight / this.targetWidth;
	var initialX = Math.round((canvasWidth-initialWidth)/2);
	var initialY = Math.round((canvasHeight-initialHeight)/2); 
	
	$("#"+this.id).css('width', canvasWidth.toString+'px').css('height', canvasHeight.toString()+'px');

	$("#"+this.id+"Box").css('width', initialWidth.toString()+'px').css('height', initialHeight.toString()+'px');
	$("#"+this.id+"Box").css('left', initialX.toString()+'px').css('top', initialY.toString()+'px');

	$("#"+this.id+"ForegroundContainer").css('width', initialWidth.toString()+'px').css('height', initialHeight.toString()+'px');
	
	$("#"+this.id+"Original").css('maxWidth', orgWidth.toString()+'px').css('maxHeight', orgHeight.toString()+'px');
	$("#"+this.id+"Original").css('width', canvasWidth.toString()+'px').css('height', canvasHeight.toString()+'px');
	
	$("#"+this.id+"Background").css('maxWidth', orgWidth.toString()+'px').css('maxHeight', orgHeight.toString()+'px');
	$("#"+this.id+"Background").css('width', canvasWidth.toString()+'px').css('height', canvasHeight.toString()+'px');
	
	$("#"+this.id+"Foreground").css('maxWidth', orgWidth.toString()+'px').css('maxHeight', orgHeight.toString()+'px');
	$("#"+this.id+"Foreground").css('width', canvasWidth.toString()+'px').css('height', canvasHeight.toString()+'px');
	$("#"+this.id+"Foreground").css('left', (0-initialX).toString()+'px').css('top', (0-initialY).toString()+'px');
	
	$("#"+this.id+"Original").attr('src', url);
	$("#"+this.id+"Original").load( (function() {
		$("#"+this.id+"Background").attr('src', $("#"+this.id+"Original").attr("src") );
		$("#"+this.id+"Foreground").attr('src', $("#"+this.id+"Original").attr("src") );
		$("#"+this.id+"HandleSE").show();
		$("#"+this.id+"HandleE").show();
		$("#"+this.id+"HandleNE").show();
		$("#"+this.id+"HandleN").show();
		$("#"+this.id+"HandleNW").show();
		$("#"+this.id+"HandleW").show();
		$("#"+this.id+"HandleSW").show();
		$("#"+this.id+"HandleS").show();
		this.loadComplete();
	}).bind(this) );
	
	this.resizableOption = {
		minWidth: this.targetWidth,
		minHeight: this.targetHeight,
		maxWidth: canvasWidth,
		maxHeight: canvasHeight,
		minTop: 0.01,
		minLeft: 0.01,
		maxRight: canvasWidth,
		maxBottom: canvasHeight,
		ratio: (this.targetWidth/this.targetHeight),
		dragHandle: true,
		handlers: {
			se: '#'+this.id+'HandleSE',
			e: '#'+this.id+'HandleE',
			ne: '#'+this.id+'HandleNE',
			n: '#'+this.id+'HandleN',
			nw: '#'+this.id+'HandleNW',
			w: '#'+this.id+'HandleW',
			sw: '#'+this.id+'HandleSW',
			s: '#'+this.id+'HandleS'
		},
		onDrag: (function(x, y) {
			$("#"+this.id+"Foreground").css('left', (0-x) + 'px').css('top', (0-y) + 'px');
		}).bind(this),
		onResize : (function(size, position) {
			$("#"+this.id+"ForegroundContainer").css('width', size.width.toString()+'px').css('height', size.height.toString()+'px');
			$("#"+this.id+"Foreground").css('left', (0-position.left) + 'px').css('top', (0-position.top) + 'px');
		}).bind(this)
	};
	
	this.status = this.STATUS_LOADING;
	return true;
};

ImageResizer.prototype.imageInfoCallback = function(json) {
	if ((this.imageInfoCallbackFunc) && (getType.toString.call(this.imageInfoCallbackFunc)==='[object Function]')) {
		if (this.imageInfoCallbackFunc(json)) {
			this.load(json['url'], json['0'], json['1']);
		}
	}else{
		this.load(json['url'], json['0'], json['1']);
	}
};

ImageResizer.prototype.loadComplete = function() {
	if (this.status == this.STATUS_RESIZABLE) {
		this.toggleOriginal(false);
		this.status = this.STATUS_RESIZABLE;
	}else{
		this.toggleOriginal(true);
		this.status = this.STATUS_ORIGINAL;
	}
	$("#"+this.id+"Box").Resizable( this.resizableOption );
};

ImageResizer.prototype.showOriginal = function() {
	if (this.status > this.STATUS_LOADING) {
		this.toggleOriginal(true);
		this.status = this.STATUS_ORIGINAL;
		this.show();
	}else	if (this.status == this.STATUS_LOADING) {
		this.status = this.STATUS_ORIGINAL;
		this.show();
	}
};

ImageResizer.prototype.showResizer = function() {
	if (this.status > this.STATUS_LOADING) {
		this.toggleOriginal(false);
		this.status = this.STATUS_RESIZABLE;
		this.show();
	}else	if (this.status == this.STATUS_LOADING) {
		this.status = this.STATUS_RESIZABLE;
		this.show();
	}
};

ImageResizer.prototype.show = function() {
	this.onoff( $("#"+this.id), true );
	this.visible = true;
};

ImageResizer.prototype.hide = function() {
	this.onoff( $("#"+this.id), false );
	this.visible = false;
};

ImageResizer.prototype.reset = function() {
	this.toggleOriginal(true);
	$("#"+this.id+"Original").attr('src', 'nothing');
	$("#"+this.id+"Background").attr('src', 'nothing');
	$("#"+this.id+"Foreground").attr('src', 'nothing');
};

ImageResizer.prototype.toggleOriginal = function(on) {
	if (on) {
		$("#"+this.id+"Original").css('display', 'block');
		$("#"+this.id+"Background").css('display', 'none');
		$("#"+this.id+"Box").css('display', 'none');
		$("#"+this.id+"HandleSE").hide();
		$("#"+this.id+"HandleE").hide();
		$("#"+this.id+"HandleNE").hide();
		$("#"+this.id+"HandleN").hide();
		$("#"+this.id+"HandleNW").hide();
		$("#"+this.id+"HandleW").hide();
		$("#"+this.id+"HandleSW").hide();
		$("#"+this.id+"HandleS").hide();		
	}else{
		$("#"+this.id+"Original").css('display', 'none');
		$("#"+this.id+"Background").css('display', 'block');
		$("#"+this.id+"Box").css('display', 'block');
		$("#"+this.id+"HandleSE").show();
		$("#"+this.id+"HandleE").show();
		$("#"+this.id+"HandleNE").show();
		$("#"+this.id+"HandleN").show();
		$("#"+this.id+"HandleNW").show();
		$("#"+this.id+"HandleW").show();
		$("#"+this.id+"HandleSW").show();
		$("#"+this.id+"HandleS").show();		
	}
};

ImageResizer.prototype.onoff = function(jQueryObj, on) {
	if (this.useEffect) {
		if (on){ $("#"+this.id).fadeIn(300); }
		else{ $("#"+this.id).fadeOut(300); }
	}else{
		if (on){ $("#"+this.id).css('display', 'block'); }
		else { $("#"+this.id).css('display', 'none'); }
	}
};

ImageResizer.prototype.getDimension = function() {
	return {
		left: Math.round( (0-$("#"+this.id+"Foreground").position().left) / this.zoomRatio ),
		top: Math.round( (0-$("#"+this.id+"Foreground").position().top) / this.zoomRatio ),
		width: Math.round( $("#"+this.id+"ForegroundContainer").width() / this.zoomRatio ),
		height: Math.round( $("#"+this.id+"ForegroundContainer").height() / this.zoomRatio )
	};
};

